PBA INSTITUTE

Fonts in CSS

In CSS, fonts are managed through the `font-family` property, specifying the typeface for text rendering. Common choices include web safe fonts like Arial and Times New Roman, alongside custom fonts from services such as Google Fonts. CSS offers comprehensive control over font characteristics such as size, weight, style, and fallback options, ensuring consistent and visually pleasing typography across various browsers and devices.

Example

Example of font-style

														
														
<!DOCTYPE html>  
<html>  
<head>  
<style>  
body {  
font-size: 100%;
background-color: #ADCACA;
}  
h2 { 
   font-style: italic;
}  
h3 {
 font-style: oblique;
 }  
h4 { 
  font-style: normal;
}   

</style>  
</head>  
<body>  
<h2 align="center">This heading is shown in italic font.</h2>  
<h3 align="center">This heading is shown in oblique font.</h3>  
<h4 align="center">This heading is shown in normal font.</h4>  
</body>  
</html>  


														
														
													

OUTPUT:

In this example, HTML document sets a background color (#ADCACA) and font size for the entire page. Headings (h2, h3, h4) are styled differently: h2 in italic, h3 in oblique, and h4 in normal font. Each heading is centered horizontally (align="center", though modern practice uses CSS). Content includes headings demonstrating these styles within the styled background.

Font-size property

														
														

<html>  
<head>  
<title> font-size property</title>  
<style type="text/css">
body{
    background-color: #CCD1D1;
    text-align: center;
}
</style>
</head>  
<body>  
<p style="font-size:xx-small;">  
This font size is extremely small.</p>  
<p style="font-size:x-small;">  
This font size is extra small</p>  
<p style="font-size:small;">  
This font size is small</p>  
<p style="font-size:medium;">  
This font size is medium. </p>  
<p style="font-size:large;">  
This font size is large. </p>  
<p style="font-size:x-large;">  
This font size is extra large. </p>  
<p style="font-size:xx-large;">  
This font size is extremely large. </p>  
<p style="font-size:smaller;">  
This font size is smaller. </p>  
<p style="font-size:larger;">  
This font size is larger. </p>  
<p style="font-size:200%;">  
This font size is set on 200%. </p>  
<p style="font-size:20px;">  
This font size is 20 pixels.  
</p>  
</body>  
</html>  

														
														
													

OUTPUT:

In this example, This HTML document demonstrates the font-size property with various values applied to <p> paragraphs. The <body> has a centered alignment and a background color (#CCD1D1). Each <p> uses inline CSS to set different font sizes: relative sizes (xx-small to xx-large, smaller, larger), absolute sizes (small, medium, large, x-large), percentage (200%), and pixel (20px). Each paragraph displays text describing its respective font size, illustrating the range and types of font size settings available in CSS.

Conclusion :

In conclusion, CSS provides extensive control over fonts, offering flexibility and design advantages. It allows designers to specify font sizes, styles (italic, bold), families (sans-serif, serif), and more. This enables consistent typography across a website, enhancing readability and aesthetics. CSS also supports web-safe fonts and the ability to define fallback options for compatibility. By separating content from presentation, CSS ensures efficient styling updates and improves site performance by reducing page load times compared to inline styles or deprecated <font> tags.

Fonts in CSS

Example

Conclusion :

CSS All Topics

SHARE